<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts/echarts.js"></script>
<script>
	var myChart;
    require.config({
        paths: {
            echarts:  '${pageContext.request.contextPath}'+'/js/echarts'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar'
        ],
        function (echarts) {
            myChart = echarts.init(document.getElementById('tj1'));
            getCountsStatistics($("#grade").val(),$("#lesson").val());
        });
    	searchCourse();
        searchAction();
        function getCountsStatistics (grade,lesson) {
            $.ajax({
                url: "/onlineEdu/student/countsStatistics",
                type: "post",
                data: {
                    grade: grade,
                    lesson: lesson
                },
                async:false,
                dataType: "json",
                success: function (result) {
                    var datas;
                    datas = result.rows;
                    $("#total").html(datas[0]+"人");
                    var xDatas = ['本期','上期','上上期'],yDatas=[];
                    yDatas.splice(0,yDatas.length);
                    datas.forEach(function (item, index) {
                        yDatas.push(item);

                    });
                    if(datas.length>0) {
                        myChart.clear();
                        myChart.setOption({
                            tooltip: {},
                            legend: {
                                data: ['在学学生数量']
                            },
                            xAxis: {
                                type: 'category',
                                data: xDatas
                            },
                            yAxis: [
                                {
                                    type: 'value',
                                    axisLabel: {
                                        formatter: '{value} (人)'
                                    }
                                }

                            ],
                            series: [{
                                name: '在学学生数量',
                                type: 'line',
                                data: yDatas
                            }]
                        });
                        myChart.hideLoading();
                    }
                },
                error: function (error) {
                    // throw ('数据请求失败！');
                }
            });
        }

    //搜索课程列表
    function searchCourse(){
        $.ajax({
            url:"/onlineEdu/lesson/getLessonGroup",
            type: 'GET',
            cache: false,
            data:{},
            dataType:  "json",
            async:false,
            success: function (data) {
                var options = '<option value="">--请选择--</option>'+data.lessonGroup;
                $("#lesson").html(options);
            }
        });
    }

    // 搜索动作
    function searchAction() {

        $('#search_button').click(function() {
            getCountsStatistics($("#grade").val(),$("#lesson").val());
        })
    }
</script>
<div class="panel panel-default">
	<ol class="breadcrumb">
		<li><label class="form-label">在学学生数量统计</label></li>
	</ol>
	<div class="panel-body">
		<div class="row">
			<div style="width: 100%;margin-top: -16px" class="box-content">
				<table id="信息查询" class="table table-bordered table-hover table-responsive">
					<tbody>
					<tr>
						<td class="item-title" align="center">年级</td>
						<td class="item-content-half">
							<select id="grade" class="form-control">
								<option value="">--请选择--</option>
								<option value="小班">小班</option>
								<option value="小升中">小升中</option>
								<option value="中班">中班</option>
								<option value="中升大">中升大</option>
								<option value="大班">大班</option>
								<option value="大升一">大升一</option>
								<option value="一年级">一年级</option>
								<option value="一升二">一升二</option>
								<option value="二年级">二年级</option>
								<option value="二升三">二升三</option>
								<option value="三年级">三年级</option>
								<option value="三升四">三升四</option>
								<option value="四年级">四年级</option>
								<option value="四升五">四升五</option>
								<option value="五年级">五年级</option>
								<option value="小升初">小升初</option>
							</select>
						</td>
						<td class="item-title" align="center">学科</td>
						<td class="item-content-half">
							<select id="lesson" class="form-control"></select>
						</td>
					</tr>
					</tbody>
				</table>
			</div>

			<%--</div>--%>
		</div>
		<div style="text-align: right">
			<button id="search_button" style="text-align: right" class="btn btn-success">
				<span class="glyphicon glyphicon-search"></span> <span>查询</span>
			</button>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-body">
			<span class="glyphicon glyphicon-user" style="color: #5bc0de"></span>
			<span>当前学生总数:&nbsp;&nbsp;</span><span style="color: orangered;font-weight:bold;" id="total">&nbsp;38人</span>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-body">
			<span>最近三期学生总数统计</span>
			<div style="height:300px;width:100%;" id='tj1'></div>
		</div>
	</div>
</div>
</div>

